前言

如同之前提到過的，MVT (Mapbox Vector Tile) 是由 Mapbox 提出來的標準，因此也率先用於自家的產品：網頁端的 Mapbox GL JS 以及行動裝置端的 Mabox GL Native。為了精確呈現地圖外觀，被稱為 Mapbox Style 的樣式檔案被用於定義：

1. 地圖初始的經緯度位置(center)、縮放層級(zoom)、方位角(bearing)、俯視角(pitch)
2. 資料來源(source)：除了向量圖磚(vector)之外，也可以包含點陣圖磚(raster)、GeoJSON、圖片或影片
3. 實際被使用者看見的圖層(layers)：一個 layer 需要定義用於稱呼的 id、資料來源(source)、型態(type)以及最重要的外觀。型態可以包含 fill（填充多邊形）、line（線段）、symbol（標記）、circle（圓點）、raster（點陣底圖）等等

而定義哪些規則可以被寫入這種樣式檔，就必須參考 Mapbox Style Spec 這項規範。

社群維護的開源專案 Mapblire 承襲了 Mapbox 的程式碼與樣式規則，但由於在網頁端/手機端的發展已出現分歧，因此使用的樣式檔案可以被稱作 Maplibre Style。相對地在撰寫上就需要直接參考 Maplibre Style Spec 這項規範。

在使用 Maplibre 作為地圖框架的語境下，我們通常會將樣式檔案簡稱為 Style。接下來，我們就來撰寫簡單的 Style，在 OSM 底圖的基礎上，添加前兩天製作的向量圖磚吧。

定義基本資料

樣式檔案的格式是由 JSON 撰寫，在開頭可以先寫下地圖的初始狀態

{
  "version": 8,
  "name": "peak",
  "center": [121, 24],
  "zoom": 14,
  ...
}

version: 標明 Style Spec 的版本，目前只須填寫8即可
name: Style 的名稱
center: 展示地圖時，其中心點的座標。東經121度北緯24度差不多在埔里的位置
zoom: 展示地圖時，初始的縮放層級

接著就需要定義資料來源了。除了我們使用 localhost 開啟的本機圖磚服務外，我們也需要 OSM 的圖磚服務作為底圖，因此可以寫下以下內容：

{
  ...
  "sources": {              // 地圖各圖層的資料來源
    "peak": {               // 向量圖磚的 ID，名為 "peak"
      "type": "vector",     // 圖磚格式為向量(vector)
      "tiles": [            // 圖磚服務的位址格式
        "http://localhost:8000/output/{z}/{x}/{y}.pbf"
      ],
      "minzoom": 10,        // 在哪些縮放層級可用
      "maxzoom": 14
    },
    "osm": {                // id 名為 "OSM" 的資料來源
      "type": "raster",     // 圖磚格式為點陣(raster)
      "tiles": [
        "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
      ],
      "minzoom": 0,
      "maxzoom": 17
    }
  },
  ...
}

接著，就是定義可見的圖層了。每個圖層都是一項物件，放置於 layers 的陣列中：

{
  ...
  sources: {
    ...
  },
  "layers": [
    {
      "id": "osm",
      "type": "raster",
      "source": "osm",
    },
    {
      "id": "peak",
      "type": "circle",
      "source": "peak",
      "source-layer": "peak",
      "paint": {
        "circle-color": "red",         // 圓點顏色
        "circle-stroke-width":         // 圓點外框寬度
        "circle-stroke-color": "white" // 圓點外框顏色
      }
    }
  ]
}

第一個圖層 id 為 osm ，是使用 OSM 底圖作為 raster 型態的圖層，直接指定 type 及 source 即可。

至於 id 為 peak 的圖層，為了以圓點呈現，這邊使用了 circle 型態並指定 source 為 peak。
在外觀方面，我們使用 paint 物件調整渲染方式。參考 Spec 中有關 circle 的章節，我們可以使用 circle-color, circle-stroke-width, circle-stroke 等屬性來設定外觀。

在前端呈現

設定好 Style 後，只要依照 Maplibre 範例撰寫相關腳本，即可順利呈現地圖：

let style = {
┆"version": 8,
  ...
}

var map = new maplibregl.Map({
  container: 'map', // node id for container
});

// 設定地圖的 style
map.setStyle(style)

結語

Maplibre Style 提供的樣式選項極多，並不是一時半刻就可以完全了解，今天我們僅僅只是做出最簡單的圖層設定（今日的程式碼可以參考 Github。）。若需要了解更多的應用方法，可以參考 OpenMapTiles 開源的一些 Style，例如 maptiler-terrain-gl-style。